<template>
  <a-modal
    :title="formTile + '工艺库'"
    :visible="true"
    width="70%"
    :footer="null"
    @cancel="reset"
  >
    <div class="main">
      <div class="steps-content">
        <a-row
          type="flex"
          justify="start"
          align="top"
        >
          <a-col :span="24">
            <div>
              <a-descriptions
                bordered
                :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
              >
                <a-descriptions-item label="单号">
                  {{billNo}}
                </a-descriptions-item>
                <a-descriptions-item label="版次">
                  {{billList.bc}}
                </a-descriptions-item>
                <a-descriptions-item label="第几件">
                  {{billList.js}}
                </a-descriptions-item>
                <a-descriptions-item label="上货季">
                  {{billList.scseason}}
                </a-descriptions-item>
                <a-descriptions-item label="样衣号">
                  {{billList.sampleCode}}
                </a-descriptions-item>
                <a-descriptions-item label="款号">
                  {{billList.styleid}}
                </a-descriptions-item>
                <a-descriptions-item label="品名">
                  {{billList.sampleName}}
                </a-descriptions-item>
                <a-descriptions-item label="品类">
                  {{billList.sampleCat}}
                </a-descriptions-item>
                <a-descriptions-item label="工艺师">
                  {{statusUser}}
                </a-descriptions-item>
                <a-descriptions-item label="制版师">
                  {{billList.bs}}
                </a-descriptions-item>
                <a-descriptions-item label="放码师">
                  {{billList.fmshor}}
                </a-descriptions-item>
                <a-descriptions-item label="时间">
                  {{statusTime}}
                </a-descriptions-item>
              </a-descriptions>
              <a-card>
                <a-form
                  :form="form"
                  :labelCol="formItemLayout.labelCol"
                  :wrapperCol="formItemLayout.wrapperCol"
                >

                  <a-form-item
                    label="后道工序"
                    style="text-align:left"
                  >
                    {{firstForm.beof}}
                  </a-form-item>
                  <a-form-item
                    label="面料正反面说明"
                    style="text-align:left"
                  >
                    {{firstForm.fabricDesc}}
                  </a-form-item>
                  <a-form-item
                    label="纸样数量"
                    style="text-align:left"
                  >
                    {{firstForm.zyNum}}
                  </a-form-item>
                  <a-form-item
                    label="裁床注意"
                    style="text-align:left"
                  >
                    {{firstForm.cutting}}
                  </a-form-item>
                  <a-form-item
                    label="工序流程"
                    style="text-align:left"
                  >
                    {{firstForm.process}}
                  </a-form-item>
                  <!-- <a-form-item
                    label="粘衬部位"
                    style="text-align:left"
                  >
                    {{firstForm.interlining}}
                  </a-form-item> -->
                  <a-form-item
                    label="特艺-排料/剪裁要求"
                    style="text-align:left"
                  >
                    {{firstForm.tyReq}}
                  </a-form-item>
                  <a-form-item
                    label="特艺/特殊工艺"
                    style="text-align:left"
                  >
                    {{firstForm.tyProcess}}
                  </a-form-item>
                  <a-form-item
                    label="常规工艺要求"
                    style="text-align:left"
                  >
                    {{firstForm.commonReq}}
                  </a-form-item>
                  <a-row style="margin: 0 10% 0 12.6%;text-align:left">
                  <a-col :span="12">
                    <a-form-item label="纸样1">
                      经:
                      {{firstForm.long1}}
                      纬:
                      {{firstForm.lat1}}
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="纸样2">
                      经:
                      {{firstForm.long2}}
                      纬:
                      {{firstForm.lat2}}
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-form-item
                    label="图片"
                    style="text-align:left"
                  >
                    <div><img style="width: 200px;" :src="firstForm.styleImg" :alt="firstForm.styleImg" srcset=""></div>
                  </a-form-item>
                </a-form>
              </a-card>
            </div>
           
          </a-col>
        </a-row>
      </div>
        
      <div>
        <a-tabs
          :default-active-key="0"
          v-model="current"
        >
          <a-tab-pane
            :tab="item.title"
            v-for="item in steps"
            :key="item.code"
          >
          </a-tab-pane>
          <a-tab-pane
            v-if="billList.brand == '校服'"
            :key="4"
            tab="校服校标"
          >
          </a-tab-pane>
        </a-tabs>
        <a-card
        v-if="current==0"
      >
        <a-table
          :columns="columns5"
          :data-source="craftBillInterlining"
        >
         
        </a-table>
      </a-card>
      <a-card
        v-if="current==1"
      >
        <a-table
          :columns="columns"
          :data-source="craftBillTemplate"
        >
        

        </a-table>
      

      </a-card>
      <a-card
        v-if="current==2"
      >
        <a-table
          :columns="columns2"
          :defaultExpandAllRows="true"
          :data-source="craftBillPart"
        >
          <template
            slot="imgurl"
            slot-scope="txt, record"
          >
            <img
              style="width:150px;height: 100px;object-fit: scale-down;"
              :src="record.imgurl"
              @click="prevImg(record.imgurl)"
              :alt="record.imgurl"
            >
          </template>
        </a-table>

      </a-card>
      <a-card
        v-if="current==3"
      >
        <a-table
          :columns="columns3"
          :data-source="craftBillSpec"
        >
          <template
            slot="imgurl"
            slot-scope="txt, record"
          >
            <img
              style="height: 100px;object-fit: scale-down;"
              :src="record.imgurl"
              @click="prevImg(record.imgurl)"
              :alt="record.imgurl"
            >
          </template>
          
        </a-table>
       
      </a-card>
      <a-card
        v-if="current==4"
      >
        <a-table
          :columns="columns4"
          :data-source="craftBillSchoolVos"
        >
          <template
            slot="imgurl"
            slot-scope="txt, record"
          >
            <img
              style="height: 100px;object-fit: scale-down;"
              :src="record.imgurl"
              @click="prevImg(record.imgurl)"
              :alt="record.imgurl"
            >
          </template>

        </a-table>

      </a-card>
      </div>
    </div>
      <a-modal
      v-model="showBigImg"
      title="图片预览"
      @ok="showBigImg = false"
      :footer="null"
      width="60%"
      :mask="true"
    >
      <div class="previmg">
        <img :src="prevImageUrl" />
      </div>

    </a-modal>

  </a-modal>

</template>

<script>
import { getBillList, getDetailList, getInterliningList,getTemplateList,getSpecList,getPartList,getSchoolList} from '@api/rd/index'

const columns = [
  {
    title: '描述',
    dataIndex: 'description'
  }
]
const columns3 = [
  {
    title: '序号',
    dataIndex: 'seq'
  },
  {
    title: '特艺',
    dataIndex: 'specId'
  },
  {
    title: '销售色',
    dataIndex: 'styColorId'
  },
  {
    title: '跳码',
    dataIndex: 'jumpSize'
  },
  {
    title: '图片',
    scopedSlots: { customRender: 'imgurl' }
  }
]
const columns2 = [
  {
    title: 'ID',
    dataIndex: 'id'
  },
  
  {
    title: '序号',
    dataIndex: 'seq',
    sorter: (a, b) => a.seq - b.seq,
  },
  {
    title: '工艺部位',
    width: 100,
    dataIndex: 'partName'
  },
  {
    title: '工艺做法',
    width: 130,
    dataIndex: 'operName'
  },
  {
    title: '图片',
    scopedSlots: { customRender: 'imgurl' }
  },
  {
    title: '描述',
    width: 300,
    dataIndex: 'description',
  },
]
const columns4 = [
  {
    title: '序号',
    dataIndex: 'seq'
  },
  {
    title: '销售色',
    dataIndex: 'styColorId'
  },
  {
    title: '描述',
    dataIndex: 'description'
  },
  {
    title: '图片',
    scopedSlots: { customRender: 'imgurl' }
  }
]
const columns5 = [
  {
    title: '编号',
    dataIndex: 'code'
  },
  {
    title: '压力',
    dataIndex: 'pressure'
  },
  {
    title: '温度',
    dataIndex: 'temperature'
  },
  {
    title: '时间',
    dataIndex: 'time'
  },
  {
    title: '部位',
    dataIndex: 'part'
  }
]
export default {
  props: {
    content: {
      type: Object,
      default: null
    }
  },

  data() {
    return {
      id: '',
      columns,
      columns2,
      columns3,
      columns4,
      columns5,
      billNo: '',
      showBill: false,
      statusTime: '',
      statusUser: '',
      prevImageUrl:'',
      loading: false,
      showBigImg:false,
      idEdit: false,
      detailImg: '',
      styleImg: '',
      disabled: false,
      firstForm: {},
      billList: {},
      craftBillInterlining:[],
      craftBillTemplate:[],
      craftBillPart:[],
      craftBillSpec:[],
      craftBillSchoolVos:[],
      form: this.$form.createForm(this),
      current: 0,
      steps: [
        { code: 0, title: '粘衬部位' },
        { code: 1, title: '统一工艺' },
        { code: 2, title: '部位信息' },
        { code: 3, title: '特艺确认' }
      ],
      formItemLayout: {
        labelCol: {
          xl: { span: 5 }
        },
        wrapperCol: {
          xl: { span: 15 }
        }
      }
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo || null
    }
  },
  created() {
    const { content } = this.$props
    if (content) {
      this.formTile = '查看'
      this.id = content.id
      this.billNo = content.billNo
      this.$nextTick(() => {
        this.getBillList()
        this.disabled = true
        this.getDetail()
      })
      this.idEdit = true
    }
  },
  methods: {
    prevImg(url) {
      this.prevImageUrl = url
      this.showBigImg = true
    },
    reset() {
      this.form.resetFields()
      this.$emit('closeDetail')
    },

    async getDetail() {
      const params = {
        id: this.id
      }
      try {
        const res = await getDetailList('bill', params)
        if (res.code == 200) {
          const detail = res.data
          this.statusUser = res.data.statusUser
          this.statusTime = res.data.statusTime
          this.firstForm = detail
          if (detail.styleImg) {
            this.styleImg = detail.styleImg
          }
           this.getInterliningList()
          this.getTemplateList()
          this.getPartList()
          this.getSpecList()
          this.getSchoolList()
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取工艺单详情失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取工艺单详情失败！')
      }
    },
    async getInterliningList() {
      const params = {
        id: this.id
      }
      try {
        const res = await getInterliningList('bill', params)
        if (res.code == 200) {
            this.craftBillInterlining = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取粘衬清单失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取粘衬清单失败！')
      }
    },
    async getTemplateList() {
      const params = {
        id: this.id
      }
      try {
        const res = await getTemplateList('bill', params)
        if (res.code == 200) {
            this.craftBillTemplate = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取统一工艺列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取统一工艺列表失败')
      }
    }, 
    async getPartList() {
      const params = {
        id: this.id
      }
      try {
        const res = await getPartList('bill', params)
        if (res.code == 200) {
            this.craftBillPart = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取部位列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取部位列表失败！')
      }
    },
    async getSpecList() {
      const params = {
        id: this.id
      }
      try {
        const res = await getSpecList('bill', params)
        if (res.code == 200) {
            this.craftBillSpec = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取特艺列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取特艺列表失败！')
      }
    },
    async getSchoolList() {
      const params = {
        id: this.id
      }
      try {
        const res = await getSchoolList('bill', params)
        if (res.code == 200) {
            this.craftBillSchoolVos = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取校服校标列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取校服校标失败！')
      }
    },
    async getBillList() {
      const params = {
        billNo: this.billNo
      }
      try {
        const res = await getBillList('bill', params)
        if (res.code == 200) {
          this.billList = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取工艺单失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取工艺单失败！')
      }
    }
  }
}
</script>

<style scoped lang="less">
.info-action {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  // margin-bottom: 20px;
}
.ml-20 {
  margin-left: 20px;
}
.steps-content {
  margin-top: 16px;
  min-height: 200px;
  text-align: center;
  padding-top: 50px;
}
.steps-action {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
}
.ant-upload-picture-card-wrapper {
  width: 20%;
}
.ant-upload-picture-card-wrapper[data-v-7206a2ce] {
  width: 100%;
}
.dynamic-delete-button {
  cursor: pointer;
  font-size: 24px;
  color: #999;
  margin: 50px 5px;
  transition: all 0.3s;
}
.dynamic-delete-button:hover {
  color: #777;
}
.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
.ant-upload-picture-card-wrapper[data-v-f7c29e7e] {
  width: 95%;
}
.steps-content[data-v-f7c29e7e] {
  padding-top: 20px;
}
.previmg {
  display: flex !important;
  justify-content: center;
  align-items: center;
}
.previmg img {
  width: 500px;
}
</style>
